<template>
  <div class="componentmanager">
    <editor-panel :title="`组件管理(共${pageContent.componentList.length}个组件)`">
      <div class="c-manager">
        <div v-if="pageContent.componentList.length === 0" class="nodata">
          暂无组件，快去左侧添加吧！
        </div>
        <draggable
          class="dragArea list-group"
          :list="componentList"
          v-bind="dragOptions"
          @start="dragStart"
          @change="dragChange"
          @end="dragEnd"
        >
          <div
            v-for="(item, index) in componentList"
            :key="item._id"
            :style="{
              borderColor: selectedComponent._id === item._id ? 'red' : '',
            }"
            class="componenti-item"
            @click="selectItem(item)"
          >
            <div>
              <i class="el-icon-menu"></i>
              {{ item.name }}-{{ item._id.substring(item._id.length-4) }}
            </div>
            <div>
              <i
                title="删除组件"
                class="el-icon-delete opbtn"
                @click="removeAt(index)"
              ></i>
              <!-- <i
                title="人群规则配置"
                class="el-icon-setting opbtn"
                :class="{ hasconfig: item.rule && item.rule.tag }"
                @click="openRuleConfig(item, index)"
              ></i> -->
              <!-- <i class="el-icon-tickets opbtn" @click="copyComponent(index)"></i> -->
            </div>
          </div>
        </draggable>
        <rule-config
          ref="ruleconfig"
          :activity-code="activityCode"
          :component-id="configSelectedItem._id"
          :rules="rules"
          @callback="saveRuleConfig"
        />
      </div>
    </editor-panel>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import tool from '@/util/tool'
import $ from 'jquery'
import draggable from 'vuedraggable'
import RuleConfig from '@/components/properties/common/RuleConfig'
import EditorPanel from '@/components/properties/common/EditorPanel'

export default {
  components: {
    draggable,
    RuleConfig,
    EditorPanel
  },
  props: {
    activityCode: {
      type: String,
      default:''
    }
  },
  data () {
    return {
      rules: {},
      componentList: [],
      configSelectedItem: { _id: '' }
    }
  },
  computed: {
    ...mapGetters('step', ['steps', 'stepsl']),
    ...mapGetters('main', ['selectedComponent', 'pageContent']),
    dragOptions () {
      return {
        animation: 200,
        group: 'list',
        disabled: false,
        ghostClass: 'ghost'
      }
    },
    componentData () {
      return JSON.stringify(this.pageContent.componentList)
    }
  },
  watch: {
    componentData (value) {

      this.componentList = JSON.parse(value)

    }
  },
  mounted () {
    let h = document.body.clientHeight
    $('.c-manager').css('height', h - 160 + 'px')
  },
  methods: {
    ...mapMutations('main', [
      'addComponent',
      'editPage',
      'removeComponent',
      'editComponent',
      'addComponentListItem',
      'removeComponentListField',
      'editComponentListItem',
      'selectComponent',
      'chooseComponent',
      'updateChildListModelField'
    ]),
    ...mapMutations('step', ['stepsAdd1', 'stepLock']),
    selectItem(item){
      this.chooseComponent(item)
    },
    fillDataToForm () { },
    removeAt (index) {
      this.$confirm('此操作将删除该组件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.removeComponent(index)
        })
        .catch(() => { })
    },
    openRuleConfig (item) {
      this.configSelectedItem = item
      this.$refs.ruleconfig.openDialog()
    },
    copyComponent (index) {
      let itemid = tool.guid()
      let model = JSON.parse(JSON.stringify(this.componentList[index]))
      model._id = itemid
      this.componentList.splice(index, 0, model)
      this.dragChange()
    },
    dragStart () { },
    dragChange () {
      this.editPage({ field: 'componentList', value: this.componentList })
      this.selectComponent({})
    },
    dragEnd () { },
    saveRuleConfig (data) {
      // 保存规则后的回调，修改组件的上下架时间和规则状态
      let tag = false
      if (data.onlineTime || data.ruleList.length > 0) {
        tag = true
      }
      this.editComponent({
        _id: this.configSelectedItem._id,
        field: 'rule',
        value: { tag: tag, onlineTime: data.onlineTime, offlineTime: data.offlineTime }
      })
    }
  }
}
</script>

<style lang="less" scope>
.componentmanager {
  // width: 400px;
  .c-manager {
    padding: 10px;
    margin-top: -10px;
    overflow-y: auto;
  }
   .c-manager::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 3px;
    // background-color: #ccc;
  }

  .c-manager::-webkit-scrollbar-thumb {
    background: #ccc;
  }
  .nodata {
    padding: 10px;
    display: flex;
    justify-content: center;
  }
  .opbtn {
    margin-left: 10px;
    cursor: pointer;
    font-size: 20px;
  }
  .hasconfig {
    color: red;
  }
  .componenti-item {
    display: flex;
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
    cursor: move;
  }
  .el-card {
    border: 0 !important;
  }
  margin-top: 10px;
  .el-card__header {
    background-color: #f5f7fa !important;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #409eff;
    border: 0;
    i {
      margin-left: 205px;
      font-size: 16px;
    }
  }
  .el-card__body {
    padding: 0px;
    .el-form-item {
      margin-bottom: 10px;
    }

    .el-icon-question {
      font-size: 14px;
    }
    .question {
      font-size: 20px;
      color: #fff;
      vertical-align: middle;
      margin: 5px 0 0 10px;
      position: absolute;
    }
    .tc {
      .el-input__inner {
        text-align: center;
      }
    }
  }
}
</style>